<route lang="json5" type="page">
  {
    layout: 'tabbar',
    needLogin: true,
    style: {
      navigationBarTitleText: '水表管理',
    },
  }
  </route>

<script setup lang="ts">
import { ref } from 'vue'

// 当前选中的水表
const selectedMeter = ref('501水表（预付）')

// 数据查询表单
const queryForm = ref({
  roomNumber: '', // 房间号
  meterModel1: '', // 表型号1
  ownerName: '', // 业主姓名
  meterModel2: '', // 表型号2
  startTime: '', // 查询开始时间
  endTime: '', // 查询结束时间
})

// 模拟水表数据
const waterData = ref([
  {
    id: 1,
    time: '1月10日',
    dailyUsage: 0.58,
    cumulativeUsage: 50.0,
    status: '表内扣款',
    statusType: 'normal',
  },
  {
    id: 2,
    time: '1月11日',
    dailyUsage: 0.38,
    cumulativeUsage: 0,
    status: '余额扣款',
    statusType: 'warning',
  },
  {
    id: 3,
    time: '1月12日',
    dailyUsage: 0.28,
    cumulativeUsage: 32.8,
    status: '表内扣款',
    statusType: 'normal',
  },
  {
    id: 4,
    time: '1月13日',
    dailyUsage: 0.38,
    cumulativeUsage: 33.8,
    status: '表内扣款',
    statusType: 'normal',
  },
  {
    id: 5,
    time: '1月14日',
    dailyUsage: 20.0,
    cumulativeUsage: 33.8,
    status: '表内扣款',
    statusType: 'normal',
  },
  {
    id: 6,
    time: '1月15日',
    dailyUsage: 0.57,
    cumulativeUsage: 33.8,
    status: '表内扣款',
    statusType: 'normal',
  },
  {
    id: 7,
    time: '1月16日',
    dailyUsage: 0.48,
    cumulativeUsage: 33.8,
    status: '表内扣款',
    statusType: 'normal',
  },
  {
    id: 8,
    time: '1月17日',
    dailyUsage: 0.58,
    cumulativeUsage: -1.0,
    status: '余额扣款不足',
    statusType: 'error',
  },
  {
    id: 9,
    time: '1月18日',
    dailyUsage: 0.38,
    cumulativeUsage: 0,
    status: '余额扣款',
    statusType: 'warning',
  },
  {
    id: 10,
    time: '1月19日',
    dailyUsage: 0.48,
    cumulativeUsage: 33.8,
    status: '表内扣款',
    statusType: 'normal',
  },
])

// 日期格式化函数
function formatDate(timestamp: number): string {
  if (!timestamp)
    return ''
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 获取状态颜色
function getStatusColor(statusType: string) {
  switch (statusType) {
    case 'normal':
      return 'text-green-600'
    case 'warning':
      return 'text-orange-500'
    case 'error':
      return 'text-red-500'
    default:
      return 'text-gray-600'
  }
}

// 查询数据
function queryData() {
  console.log(queryForm.value)
  // 验证时间选择
  if (queryForm.value.startTime && queryForm.value.endTime) {
    const startDate = new Date(queryForm.value.startTime)
    const endDate = new Date(queryForm.value.endTime)

    if (startDate > endDate) {
      uni.showToast({
        title: '开始时间不能晚于结束时间',
        icon: 'none',
      })
      return
    }
  }

  uni.showLoading({ title: '查询中...' })

  // 模拟API请求
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '查询完成', icon: 'success' })
    // 这里可以根据查询条件更新 waterData
  }, 1000)
}

// 重置表单
function resetForm() {
  queryForm.value = {
    roomNumber: '',
    meterModel1: '',
    ownerName: '',
    meterModel2: '',
    startTime: '',
    endTime: '',
  }
}

// 开始时间选择确认
function onStartTimeConfirm(event: any) {
  const selectedDate = event.value || event
  queryForm.value.startTime = formatDate(selectedDate)
}

// 结束时间选择确认
function onEndTimeConfirm(event: any) {
  const selectedDate = event.value || event
  queryForm.value.endTime = formatDate(selectedDate)
}

// 取消时间选择
function onCalendarCancel() {
  queryForm.value.startTime = ''
  queryForm.value.endTime = ''
}

// 加载水表数据
function loadWaterData() {
  uni.showLoading({ title: '加载中...' })

  // 模拟API请求
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '数据已更新', icon: 'success' })
  }, 1000)
}
</script>

<template>
  <view class="water-page">
    <!-- 数据查询模块 -->
    <view class="query-section">
      <view class="query-form">
        <!-- 第一行：房间号 | 表型号 -->
        <view class="form-row">
          <view class="form-item">
            <text class="form-label">
              房间号
            </text>
            <wd-input
              v-model="queryForm.roomNumber"
              placeholder="请输入房间号"
              clearable
            />
          </view>
          <view class="form-item">
            <text class="form-label">
              表型号
            </text>
            <wd-input
              v-model="queryForm.meterModel1"
              placeholder="请输入表型号"
              clearable
            />
          </view>
        </view>

        <!-- 第二行：业主姓名 | 表型号 -->
        <view class="form-row">
          <view class="form-item">
            <text class="form-label">
              业主姓名
            </text>
            <wd-input
              v-model="queryForm.ownerName"
              placeholder="请输入业主姓名"
              clearable
            />
          </view>
        </view>

        <!-- 第三行：查询时间 -->
        <view class="time-row">
          <view class="time-item">
            <text class="form-label">
              查询时间
            </text>
            <wd-calendar
              v-model="queryForm.startTime as any"
              type="date"
              title="选择开始时间"
              placeholder="开始时间"
              confirm-text="确定"
              cancel-text="取消"
              :z-index="1000"
              @confirm="onStartTimeConfirm"
              @cancel="onCalendarCancel"
            />
          </view>
          <view class="time-divider">
            <text class="divider-text">
              至
            </text>
          </view>
          <view class="time-item no-label">
            <wd-calendar
              v-model="queryForm.endTime as any"
              type="date"
              title="选择结束时间"
              placeholder="结束时间"
              confirm-text="确定"
              cancel-text="取消"
              :z-index="1000"
              @confirm="onEndTimeConfirm"
              @cancel="onCalendarCancel"
            />
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="button-row">
          <wd-button type="info" @click="resetForm">
            重置
          </wd-button>
          <wd-button type="primary" @click="queryData">
            查询
          </wd-button>
        </view>
      </view>
    </view>

    <!-- 水表数据表格 -->
    <view class="table-section">
      <wd-table :data="waterData" custom-class="water-table" :stripe="false" :border="false">
        <wd-table-col prop="time" label="时间" width="25%" align="center" />
        <wd-table-col prop="dailyUsage" label="日用水量" width="25%" align="center" />
        <wd-table-col prop="cumulativeUsage" label="剩余水量" width="25%" align="center" />
        <wd-table-col prop="status" label="扣款途径" width="25%" align="center">
          <template #value="{ row }">
            <text class="text-xs" :class="getStatusColor(row.statusType)">
              {{ row.status }}
            </text>
          </template>
        </wd-table-col>
      </wd-table>
    </view>
  </view>
</template>

<style scoped lang="scss">
.water-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 数据查询模块样式 */
.query-section {
  background: white;
  padding: 32rpx;
  margin: 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.query-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.query-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.query-form {
  width: 100%;
}

.form-row {
  display: flex;
  gap: 24rpx;
  margin-bottom: 32rpx;
}

.form-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 12rpx;
}

/* 时间行特殊布局 */
.time-row {
  display: flex;
  align-items: flex-end;
  gap: 16rpx;
  margin-bottom: 40rpx;
}

.time-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.time-item.no-label {
  margin-top: 40rpx; /* 对齐没有标签的输入框 */
}

.time-divider {
  display: flex;
  align-items: center;
  height: 80rpx;
  margin-top: 40rpx;
}

.divider-text {
  font-size: 28rpx;
  color: #666;
  padding: 0 8rpx;
}

/* 按钮样式 */
.button-row {
  display: flex;
  justify-content: center;
  gap: 32rpx;
  margin-top: 40rpx;
}

/* 表格区域 */
.table-section {
  margin: 24rpx;
}

/* 表格样式 */
:deep(.water-table) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  table-layout: fixed;
}

:deep(.water-table .wd-table__header) {
  background-color: #f8fafc;
}

:deep(.water-table .wd-table__cell) {
  text-align: center;
  padding: 12px 4px;
  font-size: 12px;
  word-wrap: break-word;
  white-space: normal;
  min-width: 0;
}

:deep(.water-table .wd-table__row:nth-child(even)) {
  background-color: #fafafa;
}

:deep(.water-table .wd-table__row:hover) {
  background-color: #f0f9ff;
}

:deep(.wd-calendar) {
  border-bottom: 1px solid #dadada;
  .wd-calendar__cell {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 6rpx !important;
    padding-bottom: 6rpx !important;
  }
  .wd-calendar__value {
    text-align: center;
  }
}
</style>
